<template>
  <div class="blog-list">
    <h2>📚 博客列表</h2>
    <ul>
      <li v-for="post in articles" :key="post.id">
        <NuxtLink :to="`/blog/${post.id}`">{{ post.title }}</NuxtLink>
        <p>{{ post.summary }}</p>
      </li>
    </ul>
  </div>
</template>

<script setup>
const articles = [
  {
    id: "1",
    title: "Nuxt3 入门指南",
    summary: "介绍 Nuxt3 的基本概念和用法。",
  },
  {
    id: "2",
    title: "Vue 组合式 API",
    summary: "学习 Vue 3 的 Composition API。",
  },
  {
    id: "3",
    title: "JavaScript ES6+ 特性",
    summary: "深入了解现代 JavaScript。",
  },
];
</script>
<style scoped>
.blog-list {
  max-width: 600px;
  margin: 40px auto;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
ul {
  list-style: none;
  padding: 0;
}
li {
  margin: 10px 0;
}
a {
  color: #007bff;
  font-size: 18px;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
</style>
